<template>
  <div class="logo">
    <img src="./assets/logo.svg">
  </div>
  <a-menu mode="inline" theme="dark" v-model:selectedKeys="selectedKeys" @select="selectMenu">
    <template v-for="(item, index) in data">
      <a-sub-menu v-if="item.children && item.children.length > 0" :key="index">
        <template #title>{{item.label}}</template>
        <a-menu-item v-for="sub in item.children" :key="sub.path">{{sub.label}}</a-menu-item>
      </a-sub-menu>
      <a-menu-item v-else :key="item.path">{{item.label}}</a-menu-item>
    </template>
  </a-menu>
</template>

<script lang="ts">
  import { defineComponent, ref, Ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router'
  
  export default defineComponent({
    props: {
      data: Array
    },
    setup() {
      let selectedKeys = ref([]) as Ref<string[]>
      const route = useRoute()
      const router = useRouter()

      watch(() => route.path, (value) => {
        selectedKeys.value = [value]
      }, { immediate: true })

      return {
        selectedKeys,
        selectMenu(data :any) {
          router.push(data.key)
        }
      }
    }
  })
</script>

<style lang="scss" scoped>
  .logo {
    text-align: center;
    line-height: 64px;
    background: #2b2f3ab3;
  }
</style>